<!DOCTYPE html>
<html lang="en">
<head>
  <title>Virtual chemistry lab</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="Objects/backend.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  <style>
    /* Remove the navbar's default margin-bottom and rounded borders */ 
    .navbar {
      margin-bottom: 0;
      border-radius: 0;
    }
    
    /* Add a gray background color and some padding to the footer */
    footer {
      background-color: #f2f2f2;
      padding: 25px;
    }
	
    .jumbotron{
        background-image:url("chem.jpg");
    }
	
    a{cursor:pointer;}
    table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
    }

    td, th {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 8px;
    }

    tr:nth-child(even) {
        background-color: #dddddd;
    }

   </style>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">ekshiksha</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active" ><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Join us</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>

<div class="jumbotron">
  <div class="container text-center">
    <h1 style="color:white">Practical learning in Chemistry</h1>      
    <p style="color:green"> with animations and assessments...</p>
  </div>
</div>
  
<div class="container-fluid bg-3 text-center">    
  <h3>What do you want to do?</h3><br>
  <div class="row">
    <div class="col-sm-3">
     <a data-toggle="modal" data-target="#myModal"><p>Setup Experiment</p></a>
     <a data-toggle="modal" data-target="#myModal"><img src="setup.jpg" class="img-responsive" style="width:100%" alt="Image"></a>
    <div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Please fill the details before you proceed...</h4>
      </div>
      <div class="modal-body">
		<form>
  <div class="form-group">
    <input type="text" id="Etitle" class="form-control" placeholder="Title of the experiment" maxlength="150" title="Maximum 150 characters" required>
  </div>
  <div class="form-group">
    <input type="text" id="Eauthor" class="form-control" placeholder="Author" maxlength="50" title="Maximum 50 characters" required>
  </div>
  <div class="form-group">
    <input type="text" id="Eclass" class="form-control" placeholder="Class" maxlength="20" title="Maximum 20 characters"required>
  </div>
  <div class="form-group">
    <input type="text" id="Eaim" class="form-control" placeholder="Aim of the experiment" title="Maximum 500 characters" maxlength="500" required>
  </div>
   <div class="form-group">
    <input type="text" id="Emarks" class="form-control" placeholder="Maximum marks" required>
  </div>
  <div class="form-group">
    <textarea id="Eins" class="form-control" placeholder="Instructions" required></textarea>
  </div>
  
  <button id="superSubmit" type="button" class="btn btn-primary">Submit</button>
   </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
	
	</div>
    <div class="col-sm-3"> 
      <a data-toggle="modal" data-target="#myModal4"><p>Perform Experiment</p></a>
      <a data-toggle="modal" data-target="#myModal4"><img src="perform.jpg" class="img-responsive" style="width:100%" alt="Image"></a>
    </div>
     
      <div class="modal fade" id="myModal4" role="dialog">
      <div class="modal-dialog">
    
     
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
		  <h4 class="modal-title">List of Experiments</h4>
        </div>
        <div class="modal-body">
		<div style="height:400px; overflow:scroll;">
          <table class = "TableDetails">
         
         </table>
    </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
	</div>

      
    <div class="col-sm-3"> 
      <a href="demo.html"><p>Demo Experiment</p></a>
      <a href="demo.htmo"><img src="demo.jpg" class="img-responsive" style="width:100%" alt="Image"></a>
    </div>
	 <div class="col-sm-3"> 
      <a href="evaluate.html"><p>Evaluate Experiment</p></a>
      <a href="evaluate.html"><img src="evaluate.jpg" class="img-responsive" style="width:100%" alt="Image"></a>
    </div>
   
  </div>
</div><br>



<footer class="container-fluid text-center">
  <h3>Share us@
  <a href="https://www.facebook.com/facebook"><i class="fa fa-facebook"></i></a>   
  <a href="https://www.instagram.com/?hl=en"><i class="fa fa-instagram"></i></a>
  <a href="https://mobile.twitter.com/i/guest"><i class="fa fa-twitter"></i></a>  
</h3>   
</footer>

<script type="text/javascript">
    var id = prompt("Enter User Id");
    document.getElementById('superSubmit').addEventListener('click',function(){
        console.log("IN SuperSumbit");
        if(document.getElementById("Etitle").value!="" && document.getElementById("Eauthor").value!="" && document.getElementById("Eclass").value!="" &&document.getElementById("Eaim").value!="" &&document.getElementById("Emarks").value!="" &&document.getElementById("Eins").value!=""){
            var Etitle = document.getElementById("Etitle").value;
            var Eauthor = document.getElementById("Eauthor").value;
            var Eclass = document.getElementById("Eclass").value;
            var Eaim = document.getElementById("Eaim").value;
            var Emarks = document.getElementById("Emarks").value;
            var Eins = document.getElementById("Eins").value;
            console.log( "hi89898989" + Etitle + Eins);
            haveFun(id,"setup",Etitle,Eauthor,Eclass,Eaim,Emarks,Eins);
            window.location.href = "perform.html";
        }
    });

    var ExperimentList = function() {
        //console.log("Retriving");
            var Edata;
            var num = 1;
            $.ajax({

                    method: "GET",
                    url: "GetExperimentDetails",
                    dataType: "HTML",               
                    //async: false,
                    success: function(response) {
                       console.log(response);
                        Edata = response.split(",");
                        display = "<tr><th>Sr.No.</th><th>Experiment Name</th><th>Actions</th></tr>";
                        for (i in Edata){
                            display += "<tr>";
                            display += "<td>" + num + "</td>";num++;
                            display += "<td>" + Edata[i] + "</td>";
                            display += "<td><button class=\"btn btn-primary\">" + "Perform" + "</button></td>";
                            display += "</tr>";
                        }
                        console.log(display);
                        $(".TableDetails").html(display);
                    },
                    error : function(){
                              alert("Error Occured");
                    }
        });
        /* response will be saved to data_obj*/
    }();
</script>


</body>
</html>